<template>
    <div class="app">
        <div class="details">
            <choose-status-botton :taskForm="taskForm"></choose-status-botton>
            <div class="details-header-button" v-permission="'task:form:enclosure'">
                <el-button size="mini" @click="updateDate" style="margin-right:5px">变更日期</el-button>
                <singlefileUpload ref="upload" @uploadSave="uploadSave" @returnUrl="returnUrl" :ruleFormdocFilePath='uploadForm' @uploadListDel="uploadListDel">
                    <template v-slot:openDialog>
                        <!-- <el-tooltip effect="dark" content="添加附件" placement="top-start">
                            <i class="details-header-button-icon iconfont icon-fujian-copy"></i>
                        </el-tooltip> -->
                        <el-button size="mini">添加附件</el-button>
                    </template>
                </singlefileUpload>
                <i class="details-header-button-icon el-icon-refresh-right" @click="refreshClick" :class="[refreshLoading == true?'refreshRe':'']"></i>
                <i class="details-header-button-icon el-icon-edit" v-permission="'task:form:edit'" @click="edidClick"></i>
                <i class="details-header-button-icon el-icon-delete" v-permission="'task:form:del'" @click="deteleClick"></i>
            </div>
        </div>
        <div class="details-content">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/project/details?id='+item.projId+'&dirId='+item.dirId }" v-for="item in taskForm.projCrumb">{{item.projName}}</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/task/details?id='+data.taskId }" v-for="data in taskForm.taskCrumb">{{data.taskName}}</el-breadcrumb-item>
            </el-breadcrumb>
            <span class="details-content-title">{{taskForm.name}}</span>
            <div class="details-content-misc">
                <div class="item">
                    <span class="details-content-misc-name">{{taskForm.createBy}}</span>
                </div>
                <div class="item">
                    <span class="details-content-misc-subtitle" v-if="taskForm.createTime"> 创建于 {{taskForm.createTime}},</span>
                </div>
                <div class="item">
                    <span class="details-content-misc-subtitle" v-if="taskForm.updateTime">最近更新于 {{taskForm.updateTime}}</span>
                </div>
            </div>
            <div class="details-content-tags" v-if="taskForm.tags && taskForm.tags.length > 0">
                <el-tag class="details-content-tags-item" size="medium" v-for="tag in taskForm.tags" :key="tag.name" effect="plain" :style="{color:tag.color,borderColor:tag.color}">{{tag.name}}</el-tag>
            </div>
            <div class="details-content-fields">
                <div class="details-content-fields-row">
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">负责人:</span>
                        <div class="details-content-fields-row-item-right" v-if="taskForm.masterSysUser">
                            <!-- <el-image class="item-personInCharge-logo" :src='taskForm.masterSysUser.avatar'></el-image> -->
                            <span class="item-personInCharge-title">{{taskForm.masterSysUser.userName}}</span>
                            <!-- <div class="item-personInCharge-logo-box" v-if="taskForm.userList.length > 0">
                                <span class="item-personInCharge-logo-icon">/</span>
                                <el-image v-for="(item,index) in taskForm.userList" class="item-personInCharge-logo" :src='item.avatar'></el-image>
                            </div> -->
                        </div>

                    </div>
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">任务类型</span>
                        <div class="details-content-fields-row-item-right">
                            <span class="details-content-type">{{taskForm.taskType | taskTypeFilter}}</span>
                        </div>
                    </div>
                </div>
                <div class="details-content-fields-row">
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">协作者:</span>
                        <div class="details-content-fields-row-item-right">
                            <!-- <el-image class="item-personInCharge-logo" :src='taskForm.userList[0].avatar'></el-image> -->
                            <!-- <span class="item-personInCharge-title">{{taskForm.userList[0].userName}}</span> -->
                            <div class="item-personInCharge-logo-box" v-if="taskForm.userList.length > 0">
                                <!-- <span class="item-personInCharge-logo-icon">/</span> -->
                                <!-- <el-image v-for="(item,index) in taskForm.userList" v-if="index != 0" class="item-personInCharge-logo" :src='item.avatar'></el-image> -->
                                <span class="item-personInCharge-title" v-for="(item,index) in taskForm.userList">{{item.userName}}<span v-if="index<taskForm.userList.length-1">/</span></span>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="details-content-fields-row">
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">计划时间</span>
                        <div class="details-content-fields-row-item-right">
                            <span class="details-content-date">{{taskForm.startDate}}</span>
                            <i v-if="taskForm.startDate&&taskForm.endDate" class="details-content-date-icon el-icon-right"></i>
                            <span class="details-content-date">{{taskForm.endDate}}</span>
                        </div>
                    </div>
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">实际完成时间</span>
                        <div class="details-content-fields-row-item-right" v-if="taskForm.workStartDate&&taskForm.workEndDate">
                            <span class="details-content-date">{{taskForm.workStartDate}}</span>
                            <i class="details-content-date-icon el-icon-right"></i>
                            <span class="details-content-date">{{taskForm.workEndDate}}</span>
                        </div>
                        <div class="details-content-date" v-else>暂未完成</div>
                    </div>
                    <!-- <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">预计工时</span>
                        <div class="details-content-fields-row-item-right">
                            <span class="details-content-time-title">{{taskForm.taskTime}}小时</span>
                        </div>
                    </div> -->
                </div>
                <div class="details-content-fields-row">
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">里程碑</span>
                        <div class="details-content-fields-row-item-right">
                            <!-- <i class="details-content-project-icon el-icon-collection"></i> -->
                            <span class="details-content-milepost-title">{{taskForm.mptName}}</span>
                        </div>
                    </div>
                    <!-- <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">归属项目</span>
                        <div class="details-content-fields-row-item-right">
                            <i class="details-content-project-icon el-icon-collection" v-if="taskForm.projName"></i>
                            <span class="details-content-project-title">{{taskForm.projName}}</span>
                        </div>
                    </div> -->
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">优先级</span>
                        <!--                        <div class="details-content-fields-row-item-rightTwo">-->
                        <!--                            <priority style="width: 160px" :data="taskForm"></priority>-->
                        <!--                        </div>-->
                        <span class="item-personInCharge-title">{{taskForm.matrix | taskMatrix}}</span>
                    </div>
                </div>
                <div class="details-content-fields-row">
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">计划工时</span>
                        <div class="details-content-fields-row-item-right">
                            <span class="details-content-date" v-if="taskForm.taskTime">{{taskForm.taskTime}}天</span>

                        </div>
                    </div>
                    <div class="details-content-fields-row-item">
                        <span class="details-content-fields-row-item-label">实际工时</span>
                        <div class="details-content-fields-row-item-right">
                            <span class="details-content-date" v-if="taskForm.taskWorkTime">{{taskForm.taskWorkTime}}天</span>
                            <div class="details-content-date" v-else>暂未完成</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="details-content-richtext">
                <div class="details-content-richtext_text">任务详情:</div>
                <span>{{taskForm.content}}</span>
            </div>
            <!-- <div class="details-content-subtask">
                <span class="details-content-subtask-title">子任务</span>
                <taskIndex :taskForm="subTaskData"></taskIndex>
            </div> -->
            <el-tabs v-model="operation" @tab-click="handleClick">
                <el-tab-pane label="任务附件" name="first">
                    <div class="details-content-operation-item" style="display: flex;justify-content: space-between;" v-for="(items,index) in taskForm.docList">
                        <div>
                            <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                            <el-tag style="margin-right:10px" size="small" type="" effect="plain">主任务</el-tag>
                            <span class="task-enclosure-title" @click="fileClick(items)">{{items.name}}</span>
                        </div>
                        <div style="display: flex;">
                            <span class="task-enclosure-size">上传于 {{items.createTime}}</span>
                            <div class="task-enclosure-member">
                                <span class="task-enclosure-member-title">{{items.createName}}</span>
                            </div>
                            <i class="el-icon-delete task-enclosure-del-icon" v-permission="'task:form:enclosure'" @click="enclosureCancel(items,index,'task')"></i>
                            <i v-if="sysUser.userId=='admin'" class="el-icon-edit task-enclosure-del-icon" @click="updateTakDoc(items,index)"></i>

                        </div>
                    </div>
                    <div class="details-content-operation-item" style="display: flex;justify-content: space-between;" v-for="(items,index) in subTaskDocList">
                        <div>
                            <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                            <el-tag style="margin-right:10px" size="small" type="" effect="plain">子任务</el-tag>
                            <span class="task-enclosure-title" @click="fileClick(items)">{{items.name}}</span>
                        </div>
                        <div style="display: flex;">
                            <span class="task-enclosure-size">上传于 {{items.createTime}}</span>
                            <div class="task-enclosure-member">
                                <span class="task-enclosure-member-title">{{items.createName}}</span>
                            </div>
                            <i class="el-icon-delete task-enclosure-del-icon" v-permission="'task:form:enclosure'" @click="enclosureCancel(items,index,'subtask')"></i>
                            <i v-if="sysUser.userId=='admin'" class="el-icon-edit task-enclosure-del-icon" @click="updateTakDoc(items,index)"></i>
                        </div>
                    </div>
                    <el-empty v-if="taskForm.docList && taskForm.docList.length == 0 && subTaskDocList.length == 0" description="暂无附件"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="任务合同" name="tasklist">
                    <div class="details-content-operation-item" style="display: flex;justify-content: space-between;" v-for="(items,index) in taskFormList">
                        <div>
                            <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                            <span class="task-enclosure-title" @click="fileClick(items)">{{items.name}}</span>
                        </div>
                        <div style="display: flex;">
                            <span class="task-enclosure-size">上传于 {{items.createTime}}</span>
                            <div class="task-enclosure-member">
                                <span class="task-enclosure-member-title">{{items.createName}}</span>
                            </div>
                         <i  v-if="sysUser.userId=='admin'" class="el-icon-edit task-enclosure-del-icon" @click="updateTakDoc(items,index)"></i>
                        </div>

                    </div>
                    <el-empty v-if="taskFormList && taskFormList.length == 0" description="暂无任务合同"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="子任务" name="chardtask">
                    <taskIndex :taskForm="subTaskData"></taskIndex>
                </el-tab-pane>
                <el-tab-pane label="操作日志" name="second" v-if="sysRole.roleId=='admin'">
                    <div class="details-content-operation-item" v-for="item in operationLog">
                        <i class="el-icon-edit details-content-operation-item-icon"></i>
                        <span class="details-content-operation-item-name">{{item.createName}}</span>
                        <span class="details-content-operation-item-title">{{item.content}}</span>
                        <span class="details-content-operation-item-date">{{item.createTime}}</span>
                    </div>
                    <el-empty v-if="operationLog && operationLog.length == 0" description="暂无日志"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="会议纪要" name="meeting">
                    <div class="details-content-operation-item" style="display: flex;justify-content: space-between;" v-for="(items,index) in meetingForm">
                        <div>
                            <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                            <span class="task-enclosure-title" @click="fileClick(items)">{{items.name}}</span>
                        </div>
                        <div style="display: flex;">
                            <span class="task-enclosure-size" v-if="items.docDate">会议时间：{{items.docDate}}</span>
                            <span class="task-enclosure-size" v-else>上传时间：{{items.createTime}}</span>
                            <div class="task-enclosure-member">
                                <span class="task-enclosure-member-title">{{items.createName}}</span>
                            </div>

                            <!-- <i class="el-icon-delete task-enclosure-del-icon" v-permission="'task:form:enclosure'" @click="enclosureCancel(items,index)"></i> -->

                        </div>
                    </div>
                    <!-- <div class="details-content-operation-item" style="display: flex;justify-content: space-between;" v-for="(items,index) in subTaskDocList">
                        <div>
                        <i class="iconfont icon-fujian-copy task-enclosure-icon" @click="fileClick(items)"></i>
                        <el-tag style="margin-right:10px" size="small" type="" effect="plain">子任务</el-tag>
                        <span class="task-enclosure-title">{{items.name}}</span>
                        </div>
                        <div style="display: flex;">
                        <span class="task-enclosure-size">上传于 {{items.createTime}}</span>
                        <div class="task-enclosure-member">
                            <span class="task-enclosure-member-title">{{items.createName}}</span>
                        </div>
                        <i class="el-icon-delete task-enclosure-del-icon" v-permission="'task:form:enclosure'" @click="enclosureCancel(items,index)"></i>

                        </div>
                    </div> -->
                    <el-empty v-if="meetingForm && meetingForm.length == 0" description="暂无会议纪要"></el-empty>
                </el-tab-pane>
                <el-tab-pane label="变更记录" name="third">
                    <div class="details-content-operation-item" style="justify-content: space-between;" v-for="(item,index) in changeLog">
                        <!-- <i class="el-icon-edit details-content-operation-item-icon"></i> -->
                        <div>
                            <span class="details-content-operation-item-name">{{item.createName}}</span>
                            <span class="details-content-operation-item-title">{{item.content}}</span>
                            <span class="details-content-operation-item-date" style="margin-right:10px">{{item.oldStartDate}}</span>
                            <span class="details-content-operation-item-date">{{item.oldEndDate}}</span>
                        </div>
                        <div>
                            <span class="details-content-operation-item-date">{{item.createTime}}</span>
                            <i v-if="sysUser.userId=='admin'" class="el-icon-delete task-enclosure-del-icon" @click="delectmodi(item,index)"></i>
                        </div>
                    </div>
                    <pagination v-show="total>0" :total="total" :current.sync="current" :size.sync="size" @pagination="handleClicklist" />
                    <el-empty description="暂无记录" v-if="changeLog.length == 0"></el-empty>

                </el-tab-pane>
            </el-tabs>
        </div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="1000px" :before-close="handleClose">
            <span>请选择你要变更的日期：</span>
            <div style="margin-top:20px;display:flex;align-items: center">
                <span>计划时间：</span>
                <el-date-picker @change="startDateClick" value-format="yyyy-MM-dd" :picker-options="startPickerOptions" v-model="startDate" type="date" size="medium" class="task-date" placeholder="开始日期">
                </el-date-picker>——
                <el-date-picker @change="endDateClick" value-format="yyyy-MM-dd" :picker-options="endPickerOptions" v-model="endDate" type="date" size="medium" class="task-date" placeholder="截止日期">
                </el-date-picker>
            </div>
            <div style="margin-top:20px;display:flex;align-items: center">
                <span>实际时间：</span>
                <el-date-picker value-format="yyyy-MM-dd" v-model="workStartDate" type="date" size="medium" class="task-date" placeholder="开始日期">
                </el-date-picker>——
                <el-date-picker value-format="yyyy-MM-dd" v-model="workEndDate" type="date" size="medium" class="task-date" placeholder="截止日期">
                </el-date-picker>
                <el-input placeholder="实际预计工时（天数）" style="width:200px;margin-left:20px" v-model="taskWorkTime" type="number" size="medium" class="task-time">
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatetask">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="修改附件上传时间" :visible.sync="updateTakDocialogVisible" width="1000px" :before-close="handleClose">
            <div style="margin-top:20px;display:flex;align-items: center">
                <span>请选择时间：</span>
                <el-date-picker v-model="updateTakDoccreaTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间">
                </el-date-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updateTakDocialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="updatetaskDoc">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import pagination from "@/components/Pagination/index.vue";
import { list } from "@/api/doc.js";
import { list as modiList, del as modidel } from "@/api/modi";
import priority from "../../../components/select/framelessPriority.vue";
import chooseStatusBotton from "../../../components/chooseStatus/button";
import copyTask from "../../../components/copyTask/index";
import taskIndex from "@/components/task/index.vue";
import { queryById, getTreeData, del, modiTask } from "@/api/task.js";
import { list as logList } from "@/api/log.js";
import utils from "../../../utils/utils.js";
import { save as saveDoc, softDelete, subTaskDoc, update } from "@/api/doc.js";
import singlefileUpload from "@/components/upload/singlefileUpload";
import { mapState, mapGetters } from "vuex";
export default {
    name: "Details1",
    data() {
        return {
            updateTakDocId: "",
            updateTakDoccreaTime: "",
            taskWorkTime: "",
            taskIdexShow: false,
            startPickerOptions: {},
            endPickerOptions: {},
            startDate: "",
            endDate: "",
            workStartDate: "",
            workEndDate: "",
            dialogVisible: false,
            updateTakDocialogVisible: false,
            uploadForm: [],
            taskFormList: [],
            meetingForm: [],
            type: "进行中",
            form: [
                { type: "进行中", icon: "icon-shuangyuan" },
                { type: "待办的", icon: "icon-shuangyuanquan-copy" },
                { type: "已完成", icon: "icon-yiwancheng-copy" },
                { type: "已拒绝", icon: "icon-yemian-1" },
            ],
            refreshLoading: false,
            tags: [{ name: "主要", type: "danger" }],
            operation: "first",
            selectType: false,
            taskId: "",
            taskForm: {
                userList: [],
            },
            subTaskData: [],
            subTaskTimes: null,
            operationLog: [],
            subTaskDocList: [],
            current: 1,
            size: 20,
            changeLog: [],
            total: 0,
        };
    },
    components: {
        priority,
        chooseStatusBotton,
        copyTask,
        taskIndex,
        singlefileUpload,
        pagination,
    },
    computed: {
        ...mapGetters(["sysRole", "sysUser"]),
    },
    filters: {
        taskTypeFilter(data) {
            if (data == "00") {
                return "需求";
            } else if (data == "01") {
                return "设计";
            } else if (data == "02") {
                return "开发";
            } else if (data == "04") {
                return "测试";
            } else if (data == "05") {
                return "缺陷";
            } else if (data == "06") {
                return "其他";
            }
        },
        taskMatrix(val) {
            if (val == "01") {
                return "严重";
            } else if (val == "02") {
                return "主要";
            } else if (val == "04") {
                return "次要";
            } else if (val == "05") {
                return "不重要";
            } else if (val == "00") {
                return "无优先级";
            }
        },
    },
    created() {
        this.taskId = this.$route.query.id;
        this.taskQuery();
        // this.meetingClick();
        // this.$EventBus.$on("taskUpate", () => {
        //     this.taskQuery();
        //     // this.meetingClick();
        // });
    },
    methods: {
        updateTakDoc(item) {
            console.log(item);
            this.updateTakDocId = item.docId;
            this.updateTakDocialogVisible = true;
        },
        updatetaskDoc() {
            if (utils.isNull(this.updateTakDoccreaTime)) {
                return this.$message("请选择时间");
            }
            update({
                docId: this.updateTakDocId,
                createTime: this.updateTakDoccreaTime,
            }).then((res) => {
                this.updateTakDocialogVisible = false;
                this.updateTakDoccreaTime = "";
                this.updateTakDocId = "";
                this.taskQuery();
                this.subTaskDocClick();
                this.taskFormListClick()
            });
        },
        delectmodi(item, index) {
            this.$confirm("确认删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                modidel({ ids: item.modiId }).then((res) => {
                    this.changeLog.splice(index, 1);
                });
            });
        },
        handleClicklist(data) {
            var _this = this;
            modiList(
                {
                    modiTypeId: this.taskId,
                    modiType: "01",
                    current: this.current,
                    size: this.size,
                },
                false
            ).then((res) => {
                _this.changeLog = res.data.records;
                _this.total = res.data.total;
            });
        },
        // 控制选择时间范围
        endDateClick(data) {
            console.log(data);
            this.startPickerOptions = {
                disabledDate(time) {
                    return time.getTime() > new Date(data);
                },
            };
        },
        startDateClick(data) {
            console.log(data);
            this.endPickerOptions = {
                disabledDate(time) {
                    return time.getTime() < new Date(data);
                },
            };
        },
        updateDate() {
            this.dialogVisible = true;
            this.startDate = this.taskForm.startDate;
            this.endDate = this.taskForm.endDate;
            this.workStartDate = this.taskForm.workStartDate;
            this.workEndDate = this.taskForm.workEndDate;
        },
        updatetask() {
            modiTask({
                taskId: this.taskId,
                startDate: this.startDate,
                endDate: this.endDate,
                workStartDate: this.workStartDate,
                workEndDate: this.workEndDate,
                name: "",
                taskWorkTime: this.taskWorkTime,
            }).then((res) => {
                this.dialogVisible = false;
                this.taskQuery();
            });
        },
        handleClose() {
            this.dialogVisible = false;
        },
        taskFormListClick(data) {
            list({
                current: 1,
                size: 2000,
                docType: "05",
                // dirId:'',
                deleted: 0,
                isUpdate: 0,
                isMyCreate: 0,
                name: "",
                docTypeId: "",
                taskMeet: this.taskId,
            }).then((res) => {
                console.log(res);
                this.taskFormList = res.data.docData;
                // _this.total = res.data.docData.length;
            });
        },
        meetingClick(data) {
            list({
                current: 1,
                size: 2000,
                docType: "10",
                // dirId:'',
                deleted: 0,
                isUpdate: 0,
                isMyCreate: 0,
                name: "",
                docTypeId: "",
                taskMeet: this.taskId,
            }).then((res) => {
                console.log(res);
                this.meetingForm = res.data.docData;
                // this.taskFormListClick();
                // _this.total = res.data.docData.length;
            });
        },
        // 任务详情
        taskQuery() {
            var _this = this;
            queryById({ id: _this.taskId }).then((res) => {
                if (res.data.createTime) {
                    res.data.createTime = utils.fomatTime(res.data.createTime);
                    console.log(res.data.createTime);
                }
                if (res.data.updateTime) {
                    res.data.updateTime = utils.fomatTime(res.data.updateTime);
                    console.log(res.data.updateTime);
                }
                _this.taskForm = res.data;
                // _this.subTaskQuery();
                // _this.loadLogList();
                _this.subTaskDocClick();
            });
        },
        handleClick(data) {
            if (data.name == "chardtask") {
                this.subTaskQuery();
            } else if (data.name == "third") {
                this.handleClicklist();
            }
            if (this.operation == "first") {
                this.subTaskDocClick();
            } else if (this.operation == "tasklist") {
                this.taskFormListClick();
            } else if (this.operation == "chardtask") {
                this.subTaskQuery();
            } else if (this.operation == "second") {
                this.loadLogList();
            } else if (this.operation == "meeting") {
                this.meetingClick();
            } else if (this.operation == "third") {
                this.handleClicklist();
            }
        },
        // 查询子任务
        subTaskQuery() {
            var _this = this;
            var level = Number(_this.taskForm.taskLevel) + 1;
            getTreeData({ parentId: _this.taskId, level: level }, false).then(
                (res) => {
                    const { data } = res;
                    console.log(res);
                    console.log("获取子任务");
                    _this.subTaskData = data.data;
                    this.taskIdexShow = true;
                }
            );
        },

        refreshClick() {
            var _this = this;
            this.refreshLoading = true;
            this.taskQuery();
            setTimeout(function () {
                _this.refreshLoading = false;
            }, 1000);
        },
        selectClick() {
            this.selectType = !this.selectType;
        },
        deteleClick() {
            var _this = this;
            del({ ids: _this.taskId }).then((res) => {
                this.$EventBus.$emit("task-add", res);
                _this.$store
                    .dispatch("tagsView/delView", _this.$route)
                    .then(({ visitedViews }) => {
                        this.$router.go(-1);
                        // _this.$router.push({
                        //     path: "/task/index",
                        // });
                    }); // 关闭当前tab回到列表
            });
        },
        edidClick() {
            var _this = this;
            console.log(_this.taskId);
            _this.$router.push({
                path: "/task/edit",
                query: { id: _this.taskId, projId: this.$route.query.id },
            });
        },
        // 操作
        loadLogList() {
            var _this = this;
            console.log(this.taskForm);
            logList({ logTypeId: _this.taskId, logType: "01" }, false).then(
                (res) => {
                    _this.operationLog = res.data;
                    console.log(res);
                }
            );
        },
        // 删除附件
        enclosureCancel(item, index,type) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    var _this = this;
                    softDelete({ ids: item.docId }).then((res) => {
                        console.log('我删除进来了')
                        if(type == 'task'){
                            _this.taskForm.docList.splice(index, 1);
                        }else if(type == 'subtask'){
                            _this.subTaskDocList.splice(index, 1);
                        }
                        
                        _this.$forceUpdate()
                    });
                })
                .catch(() => {});
        },
        uploadListDel(index) {
            this.uploadForm.splice(index, 1);
        },
        returnUrl(data) {
            var docFilePath = {
                fileName: data.name,
                fileUrl: data.url,
            };
            this.uploadForm.push(docFilePath);
        },
        // 保存附件
        uploadSave(val) {
            console.log("data--", val);
            let _this = this;
            // let docFilePath=[]
            // docFilePath.push({fileUrl: val.url,fileName: val.name,})
            // var docFilePath = [
            //     {
            //         fileUrl: val.url,
            //         fileName: val.name,
            //     },
            // ];
            let data = {
                name: val.name,
                docFilePath: this.uploadForm,
                docType: "01",
                docTypeId: _this.taskForm.taskId,
                status: "00",
            };
            saveDoc(data).then((res) => {
                console.log(res);
                _this.taskQuery();
                _this.$refs.upload.sucessClick();
            });
        },
        fileClick(data) {
            window.open(data.docFilePath[0].fileUrl, "_blank");
        },
        subTaskDocClick() {
            var _this = this;
            subTaskDoc({ taskId: _this.taskId }).then((res) => {
                console.log(res);
                _this.subTaskDocList = res.data;
            });
        },
    },
};
</script>

<style scoped>
.app {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 84px);
}
.details {
    z-index: 1;
    margin-top: 0;
    flex: none;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    box-shadow: inset 0 -1px 0 0 #dadee3;
    padding: 10px 10px;
    box-sizing: border-box;
}

.details-header-button {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-header-button-icon {
    padding: 8px 8px;
    color: #909aaa;
    font-size: 18px;
    margin-left: 10px;
    border-radius: 50%;
}

.details-header-button-icon:hover {
    background-color: #f5f6f8;
}

.refreshRe {
    -webkit-animation: rotate 1.2s linear infinite; /*Safari and Chrome*/
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg); /* IE 9 */
        -moz-transform: rotate(0deg); /* Firefox */
        -o-transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg); /* IE 9 */
        -moz-transform: rotate(360deg); /* Firefox */
        -o-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}

.details-content {
    padding: 15px 24px;
    width: 100%;
    flex-grow: 1;
    overflow-y: auto;
}

.details-content-title {
    font-size: 24px;
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 12px;
    display: block;
}

.details-content-misc {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
}

.item {
    margin-right: 5px;
}

.details-content-misc-name {
    color: #333333;
    font-size: 14px;
}

.details-content-misc-name:hover {
    color: #2c7ef8;
}

.details-content-misc-subtitle {
    color: #909aaa;
    font-size: 12px;
}

.details-content-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10px;
}

.details-content-tags-item {
    font-size: 12px;
    margin-right: 10px;
}

.details-content-fields {
    flex: 1;
    padding: 8px 16px;
    background-color: #fafbfb;
    margin-top: 10px;
    border-radius: 4px;
}

.details-content-fields-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 27px;
}

.details-content-fields-row-item {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.details-content-fields-row-item-label {
    width: 100px;
    display: block;
    font-size: 12px;
    margin-right: 16px;
    color: #333333;
}

.details-content-fields-row-item-right {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
    /* padding-left: 10px; */
}

.details-content-fields-row-item-rightTwo {
    width: 280px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 5px;
}

.item-personInCharge-title {
    font-size: 12px;
    color: #333333;
    man-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-personInCharge-logo-box {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item-personInCharge-logo-icon {
    font-size: 12px;
    color: #333333;
    margin-right: 5px;
    margin-left: 5px;
}

.details-content-type {
    font-size: 12px;
    color: #333333;
}

.details-content-date {
    font-size: 12px;
    color: #333333;
}

.details-content-date-icon {
    color: #909aaa;
    font-size: 16px;
    margin-left: 18px;
    margin-right: 18px;
    margin-top: 1px;
}

.details-content-project-icon {
    font-size: 12px;
    color: #909aaa;
    margin-right: 4px;
    margin-top: 2px;
}

.details-content-project-title {
    font-size: 12px;
    /* color: #909aaa; */
}

.details-content-milepost-title {
    font-size: 12px;
    color: #333333;
}

.details-content-time-title {
    font-size: 12px;
    color: #333333;
}
.details-content-richtext {
    flex: 1;
    min-height: 40px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.details-content-subtask {
    margin-top: 10px;
    flex: 1;
}

.details-content-subtask-title {
    color: #333;
    font-size: 12px;
    margin-bottom: 10px;
    font-weight: bold;
    display: block;
}

.details-content-operation-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 5px;
    box-shadow: inset 0 -1px 0 0 #dadee3;
}
.details-content-operation-item:last-child {
    box-shadow: inset 0 -1px 0 0 white;
}
/deep/.el-tabs__header {
    margin-bottom: 0px;
}
.details-content-operation-item-icon {
    font-size: 14px;
    color: #909aaa;
    margin-right: 10px;
}

.details-content-operation-item-name {
    font-size: 16px;
    color: #333333;
    margin-right: 5px;
}

.details-content-operation-item-title {
    font-size: 16px;
    color: #333333;
    font-weight: bold;
    margin-right: 10px;
}
.details-content-operation-item-date {
    font-size: 12px;
    color: #909aaa;
}

.task-enclosure-icon {
    color: #2e405e;
    font-size: 16px;
    margin-right: 5px;
    font-weight: 700;
    cursor: pointer;
}

.task-enclosure-title {
    color: #2e405e;
    font-size: 14px;
    margin-right: 16px;
    max-width: 520px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
    cursor: pointer;
}

.task-enclosure-size {
    font-size: 14px;
    font-weight: bold;
    color: #909aaa;
    display: block;
    margin-right: 20px;
}

.task-enclosure-member {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.task-enclosure-member-title {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #2e405e;
    font-size: 14px;
    font-weight: bold;
}

.task-enclosure-del-icon {
    font-size: 14px;
    color: #909aaa;
    margin-left: 20px;
    cursor: pointer;
}
.details-content-richtext_text {
    font-size: 14px;
    color: #2e405e;
    font-weight: 700;
    margin-bottom: 10px;
}
</style>
